<template>
  <div class="container">
    <div class="call-box not-on-call" v-if="showCall">
      <div class="icon icon-call" @click="handleCall">
        <i class="el-icon-phone"></i>
      </div>
      <p class="text">点击拨打电话</p>
    </div>
    <div class="call-box on-call" v-if="showHangUp">
      <div class="icon icon-hang-up" @click="handleHangUp">
        <i class="el-icon-phone"></i>
      </div>
      <p class="text">挂断电话</p>
    </div>
  </div>
</template>

<script>
import { formatFormData } from '@/utils'
import { apiGetUserZxh } from '@/api/outboundCall'

export default {
  name: 'outCall',
  props: {
    uname: String,
  },
  data() {
    return {
      showCall: false,
      showHangUp: false,
      onCall: false, // 正在通话
      socket: null,
      phone: '17788216007', // 被叫号码
      exten: '', // 分机号码
      callerID: '',
      // exten: '6109', // 分机号码
      // callerID: '17352404563',
    }
  },
  mounted() {
    this.getExten()
  },
  methods: {
    getExten() {
      if (!this.uname) {
        this.$message.error('数据接收人缺失，无法获取分机号')
        return
      }
      apiGetUserZxh(formatFormData({ name: this.uname }))
        .then((res) => {
          if (res && res.data && res.data[0] && res.data[0].fjh) {
            this.exten = res.data[0].fjh
            this.callerID = res.data[0].wxh
            this.init()
          } else {
            this.$message.error('获取分机号失败')
          }
        })
        .catch(() => {
          this.$message.error('获取分机号失败')
        })
    },
    // 初始化
    init() {
      const that = this
      this.loadScript('http://10.10.10.2:13001/socket.io/socket.io.js').then(() => {
        // 实例化
        that.socket = io.connect('http://10.10.10.2:13001')
        that.socket.on('login' + that.exten, that.onLogin)
        that.socket.on('login_sip/' + that.exten, that.onMessage)
        // 签入
        that.socket.emit('login', { username: that.exten })
      })
    },
    // 签入成功
    onLogin() {
      console.log('login success')
      this.showCall = true
    },
    // 呼出
    handleCall() {
      // this.socket.emit('callout', {
      //   Channel: 'SIP/' + this.exten, // 分机号码
      //   Exten: '9' + this.phone, // 被叫号码
      //   CallerID: this.callerID, // 主叫号码
      //   Priority: 1,
      //   Context: 'from-internal',
      //   Timeout: 30000,
      //   Async: 'true',
      // })
      // this.onCall = true
    },
    // 挂断
    handleHangUp() {
      // this.socket.emit('mthangup', {
      //   channel: $('#channel').text(), // 接通电话的源通道或目标通道
      // })
      // this.onCall = false
    },
    // 转接
    handleSwitch() {
      // 1、源通道，呼入电话的源通道
      // 2、目标分机，转接的分机号码
      // this.socket.emit('mttranfer', { channel: $('#channel').text(), exten: $('#tranferexten').val(), context: 'from-internal' })
    },
    // 呼入
    onMessage(data) {
      console.log('message', data)
      if (data.type === 1) {
        // 呼叫来电弹屏信息
        this.message = '来电' + data.caller
      } else if (data.type === 2) {
        // 返回分机状态
        /**分机状态
          -1 = Extension not found
          0 = Idle
          1 = In Use
          2 = Busy
          4 = Unavailable
          8 = Ringing
          16 = On Hold
          **/
        if (data.status == '-1') {
          this.message = '无效分机'
        } else if (data.status == '0') {
          this.message = '空闲'
          this.disabled.call = false
          this.disabled.hangUp = true
        } else if (data.status == '1') {
          this.message = '使用'
          $('#savebtn').removeAttr('disabled')
          $('#hangupbtn').removeAttr('disabled')
          $('#callbtn').attr('disabled', 'true')
        } else if (data.status == '2') {
          this.message = '忙'
        } else if (data.status == '4') {
          this.message = '注册失败'
        } else if (data.status == '8') {
          this.message = '振铃'
        } else if (data.status == '16') {
          this.message = '等待'
        }
      } else if (data.type === 3) {
        // 队列状态
        if (data.status == '0') {
          this.queue.status = '正常'
        } else if (data.status == '1') {
          this.queue.status = '暂停'
        }
      } else if (data.type === 4) {
        // 队列状态
        if (data.status == '99') {
          this.queue.name = '未知'
          $('#queuestatus').html('未知')
        } else {
          this.queue.name = data.queue
          if (data.pause == '0') {
            this.queue.status = '正常'
          } else if (data.pause == '1') {
            this.queue.status = '暂停'
          }
        }
      } else if (data.type === 5) {
        // 呼入呼出状态
        this.channel = data.channel
        if (data.callstatus == 0) {
          $('#callstatus').html('呼入')
          $('#cusmobile').val(data.caller)
        } else if (data.callstatus == 1) {
          $('#callstatus').html('呼出')
        }
      }
    },
    // 加载js
    loadScript(url) {
      return new Promise((resolve, reject) => {
        var script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = url
        document.head.appendChild(script)
        script.onload = () => {
          resolve()
        }
        script.onerror = () => {
          reject()
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.call-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .icon {
    width: 30px;
    height: 30px;
    background: #4cd966;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    margin-right: 10px;
    cursor: pointer;
    &.icon-hang-up {
      background: #ff3a30;
      transform: rotate(135deg);
    }
  }
}
</style>
